chore: add toc and widgets to subject pages

1 files changed, 36 insertions, 8 deletions

diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 71d0f42..167bfc0 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -2,39 +2,63 @@ import { getLayout } from '@components/Layouts/Layout';
 import PostPreview from '@components/PostPreview/PostPreview';
 import { t } from '@lingui/macro';
 import { NextPageWithLayout } from '@ts/types/app';
-import { SubjectProps } from '@ts/types/taxonomies';
+import { SubjectProps, ThematicPreview } from '@ts/types/taxonomies';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Listing.module.scss';
+import styles from '@styles/pages/Page.module.scss';
 import {
   getAllSubjectsSlug,
   getSubjectBySlug,
 } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
 import { ArticleMeta } from '@ts/types/articles';
+import ToC from '@components/ToC/ToC';
+import { RelatedThematics, TopicsList } from '@components/Widget';
+import { useRef } from 'react';
 
 const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
+  const relatedThematics = useRef<ThematicPreview[]>([]);
+
+  const updateRelatedThematics = (newThematics: ThematicPreview[]) => {
+    newThematics.forEach((thematic) => {
+      const thematicIndex = relatedThematics.current.findIndex(
+        (relatedThematic) => relatedThematic.id === thematic.id
+      );
+      const hasThematic = thematicIndex === -1 ? false : true;
+
+      if (!hasThematic) relatedThematics.current.push(thematic);
+    });
+  };
+
   const getPostsList = () => {
-    return [...subject.posts].reverse().map((post) => (
-      <li key={post.id} className={styles.item}>
-        <PostPreview post={post} titleLevel={3} />
-      </li>
-    ));
+    return [...subject.posts].reverse().map((post) => {
+      updateRelatedThematics(post.thematics);
+
+      return (
+        <li key={post.id} className={styles.item}>
+          <PostPreview post={post} titleLevel={3} />
+        </li>
+      );
+    });
   };
 
   const meta: ArticleMeta = {
+    dates: subject.dates,
     website: subject.officialWebsite,
   };
 
   return (
-    <article className={styles.wrapper}>
+    <article className={`${styles.article} ${styles['article--no-comments']}`}>
       <PostHeader
         cover={subject.featuredImage}
         intro={subject.intro}
         meta={meta}
         title={subject.title}
       />
+      <aside className={styles.toc}>
+        <ToC />
+      </aside>
       <div className={styles.body}>
         <div dangerouslySetInnerHTML={{ __html: subject.content }}></div>
         {subject.posts.length > 0 && (
@@ -44,6 +68,10 @@ const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
           </section>
         )}
       </div>
+      <aside className={`${styles.aside} ${styles['aside--overflow']}`}>
+        <RelatedThematics thematics={relatedThematics.current} />
+        <TopicsList title={t`Other topics`} />
+      </aside>
     </article>
   );
 };